<template>
  <div class="alone-banner layui-bg-black">
    <div class="layui-main">
      <h1>物 料 市 场</h1>
      <p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>
    </div>
  </div>
  <br />
  <div class="layui-container" style="width: 80%">
    <div class="layui-row layui-col-space16">
      <div class="layui-col layui-col-md6">
        <a href="https://github.com/rstacruz/nprogress">
          <div class="project-list-item">
          <img
            class="project-list-item-cover"
            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
          />

          <div class="project-list-item-body">
            <h2>vueUse</h2>
            <div class="project-list-item-text layui-text">
              Collection of essential Vue Composition Utilities for Vue 2 and 3
            </div>
            <div class="project-list-item-desc">
              <span class="time">几秒前</span>
              <div class="ew-head-list"></div>
            </div>
          </div>
        </div>
        </a>
      </div>
      <div class="layui-col layui-col-md6">
        <a href="https://github.com/scopewu/qrcode.vue">
          <div class="project-list-item">
          <img
            class="project-list-item-cover"
            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
          />

          <div class="project-list-item-body">
            <h2>Qrcode.vue</h2>
            <div class="project-list-item-text layui-text">
              A Vue.js component to generate qrcode。
            </div>
            <div class="project-list-item-desc">
              <span class="time">几秒前</span>
              <div class="ew-head-list"></div>
            </div>
          </div>
        </div>
        </a>
      </div>
      <div class="layui-col layui-col-md6">
        <a href="https://github.com/rstacruz/nprogress">
          <div class="project-list-item">
          <img
            class="project-list-item-cover"
            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
          />

          <div class="project-list-item-body">
            <h2>Nprogress</h2>
            <div class="project-list-item-text layui-text">
              For slim progress bars like on YouTube, Medium。
            </div>
            <div class="project-list-item-desc">
              <span class="time">几秒前</span>
              <div class="ew-head-list"></div>
            </div>
          </div>
        </div>
        </a>
      </div>
      <div class="layui-col layui-col-md6">
        <a href="https://github.com/buuing/lucky-canvas">
          <div class="project-list-item">
          <img
            class="project-list-item-cover"
            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
          />

          <div class="project-list-item-body">
            <h2>Lucky-Canvas</h2>
            <div class="project-list-item-text layui-text">
              转盘 / 九宫格 / 老虎机 / 抽奖插件。
            </div>
            <div class="project-list-item-desc">
              <span class="time">几秒前</span>
              <div class="ew-head-list"></div>
            </div>
          </div>
        </div>
        </a>
      </div>
    </div>
  </div>
</template>
lucky-canvas

<style>
.alone-banner {
  margin-top: 60px;
  height: 190px;
  text-align: center;
  font-weight: 300;
  color: #fff;
}
.alone-banner h1 {
  padding-top: 60px;
  line-height: 32px;
  font-size: 30px;
  font-weight: 300;
  color: white !important;
}
.alone-banner p {
  padding-top: 20px;
  color: #e2e2e2;
  color: rgba(255, 255, 255, 0.8);
}

.project-list-item {
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.project-list-item .project-list-item-cover {
  width: 100%;
  height: 180px;
  display: block;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.project-list-item-body {
  padding: 20px;
  border: 1px solid #e8e8e8;
}

.project-list-item .project-list-item-body > h2 {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
}

.project-list-item .project-list-item-text {
  height: 40px;
  overflow: hidden;
  margin-bottom: 12px;
  font-size: 14px;
}

.project-list-item .project-list-item-desc .time {
  color: #999;
  font-size: 12px;
}
</style>